@extends('admin.layout.layout')
@section('title')
<title>北京仁爱慈善后台</title>
@endsection
@section('style')
<style>
    *{margin: 0;padding: 0;list-style:none;}
  	.banner{
  		width: 1000px;height: 345px;position: relative;
  		margin: 30px;overflow: hidden;
  	}
  	.banner .img{
  		width: 7000px;position: absolute;
  	}
  	.banner .img li{float: left;}
  	.banner .img li img{width: 1000px;height: 345px;}
  	.num{position: absolute;width: 100%;bottom:10px;
  		left:0px;text-align:center}
  	.num li{
    	width: 10px;height: 10px;border-radius:50%;
    	background: #333;
    	margin: 0 3px;display:inline-block;
  	}
  	.num .on{background: #f39;}
  	.banner .bttn{
  		width: 30px;height: 50px;
  		position: absolute;top:50%;
  		background: rgba(0,0,0,0.5);
  		text-align:center;
  		line-height:53px;color:#fff;
  		font-size:40px;font-family:'宋体';
  		cursor:pointer;margin-top: -25px;
  	}
  	.btn_l{left:0px;}
  	.btn_r{right:0px;}
</style>
@endsection
@section('content')
<div class="row">
    <div class="col-lg-12">
        <h1 class="page-header">首页</h1>
    </div>
</div>
<div class="row">
    <div class="banner">
        <ul class="img">
            @foreach($data as $k=>$v)
            <li><a href="{{url($v->link)}}"><img src="{{asset($v->img)}}" width="100%"></a></li>
            @endforeach
        </ul>
        <ul class="num">
            <!-- <li class="on"></li> -->
            @foreach($data as $k=>$v)
            <li></li>
            @endforeach
        </ul>
        <div class="bttn btn_l">&lt;</div>
        <div class="bttn btn_r">&gt;</div>
    </div>
</div>
@endsection
@section('js')
<script type="text/javascript">
    //定义全局变量
    var i = 0;
    //无缝 第一步  克隆第一张图片 放到后面
    var cloneImg  = $('.banner .img li:first').clone();
    $('.banner .img').append(cloneImg);
    //获取图片数量
    var len = $('.img li').length;
    //绑定左右单击事件
    $('.banner .btn_r').click(function(){
        moveR();//调用函数
    });
    $('.banner .btn_l').click(function(){
        moveL();
    });
    //启动定时器
    var inte = setInterval(moveR,3000);
    //鼠标悬停事件
    $('.banner').hover(function(){
        //清除定时器
        clearInterval(inte);
    },function(){
        inte = setInterval(moveR,3000);
    })
    //给小圆点绑定单击事件
    $('.banner .num li').click(function(){
        //获取当前这个元素的索引 index()
        i = $(this).index();
        //计算left
        var newLeft = i*1000;
        //设置样式
        // $('.banner .img').css({left:-newLeft+'px'});
        $('.banner .img').animate({left:-newLeft+'px'},1000);
        //设置圆点的样式
        $('.banner .num li').eq(i).addClass('on').siblings().removeClass('on');
    })
    //封装向右移动函数
    function moveR()
    {
        i++;
        //判断越界
        if(i == len){
            // i = 0;
            //无缝 第二步 在越界时用css把ul定位到0
            $('.banner .img').css({left:'0px'});
            //修改i的值
            i = 1;
        }
        //计算left
        var newLeft = i*1000;
        //设置样式
        $('.banner .img').animate({left:-newLeft+'px'},1000);
        //判断  无缝 第三步
        //设置圆点的样式
        if(i == len-1){
            $('.banner .num li').eq(0).addClass('on').siblings().removeClass('on');
        }else{
            $('.banner .num li').eq(i).addClass('on').siblings().removeClass('on');
        }
    }
    //封装向左移动函数
    function moveL()
    {
        i--;
        //判断越界
        if(i == -1){
            // i = len-1;
            //无缝 第四步
            $('.banner .img').css({left:-(len-1)*1000+'px'});
            i = len-2;
        }
        //计算left
        var newLeft = i*1000;
        //设置样式
        $('.banner .img').animate({left:-newLeft+'px'},1000);
        //设置圆点的样式
        $('.banner .num li').eq(i).addClass('on').siblings().removeClass('on');
    }
</script>
@endsection


